<template>
  <div id="visual">
    <div class="page">
      <!-- 头部 -->
      <topComponent
        name="榆林市公共资源交易平台数字见证大厅"
        @click.native="$router.push({ path: '/ksh' })"
      ></topComponent>
      <div class="nav">
        <div style="display: flex; width: 500px">
     
          <div
            class="nav-button"
           
            v-for="(item, index) in navTabs"
            :class="{ active: item.disabled  }"
            @click="handleActiveTab(item)"
            :key="index"
          >
            {{ item.name }}            

          </div>
        </div>
      </div>
      <!--  -->
      <div class="main">
        <proViewComponent lerg :onGetProData="onGetProData" :onStart="getData"   ref="proView" />
        <!-- <proViewComponent lerg ref=""  /> -->
      </div>
    </div>
    <menuRightComponent ref="menuRight" :onButton="onButton" :visible.sync="menuRight" />
    <diaWaringComponent ref="diaWaring" title="预警详情" :visible.sync="diaWaring" />
    <proDetailComponent  ref="proDetail" :visible.sync="diaPro"/>

  </div>
</template>

<script>
const typeJSGC = {
  JSGC: "建设工程",
  ZFCG: "政府采购"
};
const typeRYLB = {
  ZJ: "评标专家",
  JD: "甲方代表",
  ZBDL: "招标代理"
};
import topComponent from "@/components/top";
import menuRightComponent from "./components/menuRight.vue";
import diaWaringComponent from "./components/diaWaring.vue";
import proViewComponent from "./components/proViewComponent.vue";
import proDetailComponent from "./components/proDetail.vue"
import { dvListAlarm, dvListBidInfoAll, dvGetAlarm, getAlarmPlaybackURLs, dvGetSiteData } from "@/api/pageViewBig";
import { formatDateFn } from "@/utils/utils";
import { Loading } from "element-gui";
export default {
  components: {
    topComponent,
    menuRightComponent,
    diaWaringComponent,
    proViewComponent,
    proDetailComponent
  },
  data() {
    return {
      diaWaring: false,
      menuRight: false,
      diaPro:false,
      navTabs:[
        {
          name:'人员分布',
          disabled:true,
          keys:["工作人员组","招标代理组",'评标专家组',"甲方代表组"]
        },
        {
          name:'行为预警',
          disabled:true,
          keys:["预警组"]
        },
        {
          name:'项目信息',
          disabled:true,
          keys:["场地房间"]
        }
      ],
      tableData: [],
      typeJSGC,
      typeRYLB,
      queryParams: {
        date: "",
        bidIds: []
      },
      proList: [],
      alarmList_ok: [],
      alarmList_no: [],
      cardlist: [
        {
          name: "张三",
          id: "20241216XXPBZJ01",
          value: "预警1",
          points: { x: 30, y: 2, z: -19 }
        },
        {
          name: "李四",
          value: "预警2",
          id: "2",
          points: { x: 30, y: 2, z: -10 }
        }
      ],
      rooms:[],
      timer:null,
      subscribedUrlArr:[],
      bidList:[], // 标段列表
      canvasTrackAlarmList:new Map(),
      peopleList:new Map(), //人员列表 
    };
  },
  computed: {
    wsData() {
      return this.$websocket.getters.wsData;
    }
  },
  watch: {
    wsData: {
      handler(newVal) {
        if (newVal) {
          if(this.$refs.proView){
            const { data, type  } = newVal
            const bidId = data.bidId
            // if( this.bidList.indexOf(bidId) !==-1){
             
            // }
            if(type === 'alarm'){  // 来预警
                 this.$refs.proView.handlePlay()
                this.getAxiosDataYJpoint('add',data)
              }
              if(type === 'handle.alarm'){  // 预警处理 alarm.handle
                this.getAxiosDataYJpoint('remove',data)
                this.handleDvListAlarmItem()
              }
              if(type === 'location'){  // 人员移动
                this.getAxiosDataRYpoint('add',data)
              }
              if(type === 'uwb_unbind'){  // uwb卡解绑
                this.getAxiosDataRYpoint('remove',data)
              }
          }
        }
      },
      immediate: true
    },
  },
  mounted() {
  
    
    this.queryParams.date = formatDateFn(new Date(), "yyyy-MM-dd");
  },
  destroyed() {
    clearInterval(this.timer)
  },

  methods: {
        // 获取预警列表
  //  async getTrackListAlarm(){
  //     const params = {
  //       bidIds: this.bidList,
  //       personType,
  //     }
  //     const result = await trackListAlarm(params)
  //     if(result.code === 0){
  //       // 重置列表
  //       this.trackAlarmList = []
  //       // 清空画布
  //       this.$refs["treeJScans"]?.clearCanvas()
  //       for(const item of result.data){
  //         //  0 未处理 // -1 待处理  1 已处理
  //         if(item.status !== -1){
  //           this.trackAlarmList.push(item)
  //         }else{
  //           this.getAxiosDataYJpoint('add',item)
  //         }
  //       }
  //     }
  //   },
      // 实时轨迹
    async webSocketTaskFn() {
      // const bidId =  '8a7286be92889c9e0192890d1ccf13e7'
      const arr = [ `/ws/witness/track`,]
      const wsUrl = `${process.env.VUE_APP_API}/stomp`; // 初始化地址
      this.$websocket.dispatch("websocket_init", wsUrl);
      arr.forEach(url => {
        if (this.subscribedUrlArr.indexOf(url) === -1) {
          this.$websocket.dispatch("websocket_subscribe", url);
          this.subscribedUrlArr.push(url);
        }
      })
    },
    // 获取今日项目列表
   async dvGetSiteData() {
    const r = await dvGetSiteData(this.queryParams.date)
    if(r.code !== 0) return 
    this.rooms = r.data
    this.bidList = r.data.map(item => item.bidId)
    this.$set(
        this.queryParams,
        "bidIds",
        this.bidList
      );
      this.$refs["proView"].setRoomDate( this.rooms );
    },

    //   设置预警点位并跟新预警画布
    getAxiosDataYJpoint(xw,data) {
      // xw add remove
      this.canvasTrackAlarmList.set(data.id,data)
      this.$refs["proView"].setWangerRadiusPoints(xw,data);
    },
       // 设置人员
       getAxiosDataRYpoint(xw,data) {
    // 评标专家 
    // 招标代理
    // 甲方代表 
        if(xw === 'add'){
          this.peopleList.set(data.personId,data)
          this.$refs["proView"].setPeopleRadiusPoints(xw,data);
        }else{
          this.peopleList.delete(data.personId)
          this.$refs["proView"].setPeopleRadiusPoints(xw,data);
        }  
    },
    // 实时画点
    // handlinePonit() {
    //   const peopleList = [
    //     {
    //       type: "PBZJ",
    //       color: "#68F60C",
    //       list: [{ name: "20241216XXPBZJ01", id: "20241216XXPBZJ01", xyz: { x: 46, y: 13, z: 1 } }]
    //     },
    //     {
    //       type: "ZBDL",
    //       color: "#FFC30A",
    //       list: [
    //         { name: "王文", id: "4", xyz: { x: 18, y: 24, z: 1 } },
    //         { name: "王五", id: "5", xyz: { x: 19, y: 23.8, z: 1 }}
    //       ]
    //     },
    //     {
    //       type: "JFDB",
    //       color: "#EB31D9",
    //       list: [
    //         {
    //           name: "张三",
    //           id: "2",
    //           xyz: { x: 67, y: 22, z: 26 }
    //         },
    //         {
    //           name: "李四",
    //           id: "3",
    //           xyz: { x: 49, y: 14, z: 26 }
    //         }
    //       ]
    //     }
    //   ];
    //   // data.forEach((e)=>{
    //   //     // 修改点位置
    //   //     // this.$refs["proView"].addProViewDataPoint(e);
    //   // })
    //   let flg = false
    //   this.timer = setInterval(() => {
       
    //    let xyz;
    //    let xyz2
    //     if(flg){
    //        xyz = {  x: 49, y: 14, z: 23 }
    //        xyz2 = { x: 45, y: 13, z: 1 }
    //     }else{
    //        xyz = {  x: 50, y: 14, z: 23 }
    //        xyz2 = { x: 47, y: 13, z: 1 }
    //     }
    //     this.$refs["proView"].addProViewDataPoint({name:'李四',id:'3',xyz:xyz});
    //     this.$refs["proView"].addProViewDataPoint({ name: "20241216XXPBZJ01", id: "20241216XXPBZJ01", xyz:xyz2  });
    //     flg = !flg
    //   }, 1500);
    //   this.$refs["proView"].setPeopleRadiusPoints(peopleList);
    // },
    onGetProData(data,type){
      console.log('===',type,data);
      
      if(data){
        if(type === '预警'){
          this.onButton(data)
          return
        }
        this.diaPro = true
        if(type === '项目'){
          this.$refs['proDetail'].setMsg(data,type)
        }
         if(type === '人员'){
          this.$refs['proDetail'].setMsg(data,type)
        }



       
      }else{
        this.diaPro = false
      }
    },
    //出
    async onButton(item) {
      const p = {
        deviceId: item.deviceId,
        alarmId: item.id
      };
      const r = await getAlarmPlaybackURLs(p);
      //   if(r.code !==0 ) return
      item.playUrl = r.data;
      this.diaWaring = true;
      this.$refs.diaWaring.setAlarmMsgList(item);
    },
    handleActiveTab(item) {
     item.disabled = ! item.disabled
     this.$refs.proView.handleIsShow(item)
    },
    // 获取数据
    async getData() {
    
      await  this.dvGetSiteData();
      await this.handleDvListAlarm();
      this.webSocketTaskFn() 
     
    },
    async handleDvListAlarmItem() {
      const p = {
        bidIds: this.bidList,
        personType: "",
        status: '1'
      };
      const r = await dvListAlarm(p);
      if (r.code !== 0 || r.data.lenght === 0) return;
      // 0 未处理 // -1 待处理  1 已处理
      this.$refs.menuRight.setWarings(r.data);
    },
    // 获取预警列表
    async handleDvListAlarm() {
      const p = {
        bidIds: this.bidList,
        personType: "",
        status: ""
      };
      const r = await dvListAlarm(p);
      if (r.code !== 0 || r.data.lenght === 0) return;
      // const alarmList_ok = []
      // const alarmList_no = []
      // 0 未处理 // -1 待处理  1 已处理
      r.data.forEach((e) => {
        if (e.status === 1) {
          this.alarmList_ok.push({ ...e });
        }
        if (e.status === -1) {
          this.alarmList_no.push({ ...e });
          this.getAxiosDataYJpoint('add',e)
        }
      });
      this.$refs.menuRight.setWarings(this.alarmList_ok);
    },
    // async handleListBidInfoAll() {
    //   const p = {
    //     date: this.queryParams.date,
    //     search: ""
    //   };
    //   const r = await dvListBidInfoAll(p);
    //   if (r.code !== 0 || r.data.lenght === 0) return;
    //   this.proList = r.data;
    //   this.$set(
    //     this.queryParams,
    //     "bidIds",
    //     r.data.map((x) => x.guid)
    //   );
    // }
  }
};
</script>

<style scoped lang="scss">
#visual {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../../../../assets/bg.jpg");
  overflow: hidden;
  background-size: 100% 100%;
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav {
    padding-top: 10px;
    color: #fff;
    padding-left: 20px;
    cursor: default;

    &-button {
      letter-spacing: 0.1em;
      padding: 4px 6px;
      border: 1px solid #0538d0;
      margin-right: 10px;
      font-size: 14px;

      &:hover {
       // background: #4170fa;
        border-bottom: 1px solid #fff;
      }

      &.active {
        background: #4170fa;
        border-bottom: 1px solid #fff;
      }
    }
  }

  .main {
    height: calc(100vh - 250px);
    position: relative;
    padding: 0px 20px;
    // background-color: rgba(14, 50, 159, 0.5);
  }
}

.text-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.text-weight {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

//  图标样式
.iconfontSvg {
  width: 28px;
  height: 28px;
  fill: #fff;
  margin-left: 10px;
}

.iconfontSvg.active {
  fill: #0984ff !important;
}

.font14 {
  font-size: 14px;
}

.font20 {
  font-size: 24px;
}
.iconSize {
  font-size: 20px;
}

::v-deep .play-container {
  .play-content {
    width: 1000px;
  }
}
</style>